import { useNavigate } from "react-router-dom"; // 用来实现编程式导航
import "./login.css"; // 引入样式
import { useEffect, useState } from "react"; // 引入hooks
import { message, Checkbox } from 'antd'; // antd
import {getCookie, myStorage, removeCookie, setCookie} from "../../utils";// 引入cookie封装函数
import { login } from "../../api";
import store from "../../store/store";
import {usernameAction} from "../../store/action";

function Login(props) {
  // 返回一个函数用来实现编程式导航
  const navigate = useNavigate();
  // 用户名 密码
  const [username,setUsername] = useState('')
  const [password,setPassword] = useState('')
  // 记住密码
  const [checked,setChecked] = useState(false)
  // 初始化执行一次判断上次是否勾选记住密码
  useEffect(()=>{
    if (getCookie('username') !== '' && getCookie('password') !== '') {
      setUsername(getCookie('username'));
      setPassword(getCookie('password'));
      setChecked(true);
    }
  },[])
  // 绑定input
  const handleUsername = (e)=>{
    setUsername(e.target.value);
  }
  const handlePassword = (e)=>{
    setPassword(e.target.value);
  }
  // 点击登录
  const handleLogin = (e)=>{
    e.preventDefault();
    // 判断不为空
    if (username!==""&&password!==""){
      // 发送post请求
      login({username,password}).then(data=>{
        if (data.code === 200){
          // 提示用户
          message.success(data.msg);
          // 判断是否勾选记住密码
          if (checked){
            setCookie('username', username, 1);
            setCookie('password', password, 1);
          }else {
            removeCookie('username');
            removeCookie('password');
          }
          // 保存token
          myStorage.set("token",data.token);
          // redux保存username
          store.dispatch(usernameAction(username));
          // 跳转首页
          navigate("/home");
        }else {
          message.error(data.msg);
        }
      }).catch(err=>{
        console.log(err);
      })
    }else {
      message.warning("请输入用户名和密码");
    }
  }
  // 回车登录
  const onKeyDown = (e)=>{
    if (e.keyCode === 13){
      handleLogin()
    }
  }
  return (
    <div>
      <div className="box">
        <div className="login">
          <h2>用户登录</h2>
          <div className="login_box">
            <input type="text" required value={username} onKeyDown={onKeyDown} onChange={handleUsername} />
            <label htmlFor="">用户名</label>
          </div>
          <div className="login_box">
            <input type="password" required="required" value={password} onKeyDown={onKeyDown} onChange={handlePassword} />
            <label htmlFor="">密码</label>
          </div>
          <div className="forget_box">
            <Checkbox
                checked={checked}
                onChange={()=>{
                  setChecked(!checked)
                }}
            >
              记住密码
            </Checkbox>
          </div>
          <a onClick={handleLogin}>
            <div>
              登&nbsp;录<span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </a>
        </div>
      </div>
    </div>
  );
}


export default Login;
